<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>增加商铺</title>
    <style>
        input[type="file"] {
            display: none;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>
</head>
<body>

<div id="#app">
    <el-container id="app">

        <el-main>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">

                <el-form-item label="店铺名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-divider></el-divider>


                <el-form-item label="店铺类型" prop="chooseTypes">
                    <template>
                        <el-select v-model="ruleForm.chooseTypes" multiple placeholder="请选择">
                            <el-option
                                    v-for="storeType in storeTypes"
                                    :key="storeType.id"
                                    :label="storeType.typeName"
                                    :value="storeType.id">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
                <el-divider></el-divider>


                <el-form-item label="商家详情" prop="detail">
                    <el-input size="medium" v-model="ruleForm.detail"></el-input>
                </el-form-item>
                <el-divider></el-divider>


                <!-- 表单里的图片上传！！！ -->
                <el-form-item label="上传图片:"  prop="image">
                    <el-input v-model="ruleForm.image" v-if="false"></el-input>
                    <el-upload class="upload-demo" ref="image" drag action="/common/upload"
                               :on-success="handleAvatarSuccess">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-divider></el-divider>


                <el-button type="primary" icon="el-icon-add-location" style="font-size: 13px" @click="dialogFormVisible = true;">新增地址</el-button>
                <el-dialog title="新增地址" :visible.sync="dialogFormVisible"><!--title-->


                    <el-form :model="addressForm" :rules="addressRules" ref="addressForm" label-width="100px" class="demo-addressForm">

                        <el-form-item label="省" prop="provinceId"><!--prop对应下面rules里的规则，rules和addressForm的名称要对应起来-->
                            <el-select style="width:100%;" v-model="addressForm.provinceId" placeholder="请选择省份"
                                       @change="refreshCity">
                                <el-option :key="province.id" v-for="province in addressForm.provinceList" :label="province.name"
                                           :value="province.id"></el-option>
                            </el-select>
                        </el-form-item>


                        <el-form-item label="市" prop="cityId">
                            <el-select style="width:100%;" v-model="addressForm.cityId" placeholder="请选择城市"
                                       @change="refreshArea">
                                <el-option v-for="city in addressForm.cityList" :label="city.name" :value="city.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="区" prop="areaId">
                            <el-select style="width:100%;" v-model="addressForm.areaId" placeholder="请选择地区">
                                <el-option v-for="area in addressForm.areaList" :label="area.name" :value="area.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="详细地址" prop="detailAddress">
                            <el-input v-model="addressForm.detailAddress" placeholder="请输入详细地址"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号" prop="tel">
                            <el-input v-model="addressForm.tel" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="收件人姓名" prop="receiver">
                            <el-input v-model="addressForm.receiver" placeholder="请输入收件人姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="邮编" prop="emailCode">
                            <el-input v-model="addressForm.emailCode" placeholder="请输入邮编"></el-input>
                        </el-form-item>


                        <el-form-item>
                            <el-button type="primary" @click="submitAddressForm('addressForm')">确定</el-button>
                            <el-button @click="clearAddForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <el-divider></el-divider>

                <el-form-item>
                    <el-button type="primary" size="mid" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button size="mid" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>



        </el-main>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {

            storeTypes:[],
            dialogFormVisible: false,
            addressId:'',

            addressForm:{
                provinceId: '',
                cityId: '',
                areaId: '',
                provinceList: [],
                cityList: [],
                areaList: [],
                detailAddress: '',
                tel: '',
                receiver: '',
                emailCode: '',
            },
            addressRules:{
                provinceId: [
                    //自定义 { type: "number",required:true, validator: validateProvince, trigger: 'change' }
                    {required: true, message: '请选择城市', trigger: 'change'}
                ]
                ,
                cityId: [
                    {required: true, message: '请选择城市', trigger: 'change'}
                ]
                ,
                areaId: [
                    {required: true, message: '请选择区域', trigger: 'change'}
                ]
                ,
                detailAddress: [
                    {required: true, message: '请输入详细地址', trigger: 'blur'},
                    {max: 20, message: '长度在 20 个字符以内', trigger: 'blur'}
                ],
                tel: [
                    {required: true, message: '请输入电话号码', trigger: 'blur'}
                ],
                receiver: [
                    {required: true, message: '请输入收件人姓名', trigger: 'blur'}
                ],
                emailCode: [
                    {required: true, message: '请输入邮编', trigger: 'blur'}
                ]
            },



            ruleForm: {
                name: '',
                detail: '',
                chooseTypes: [],
                image:'',
            },
            rules: {
                name: [
                    {required: true, message: '请输入商家名称', trigger: 'blur'},
                ],
                chooseTypes: [
                    {required: true, message: '请选择店铺类型', trigger: 'change'},
                ],
                detail: [
                    {required: true, message: '请输入商家详情', trigger: 'blur'},
                ],
            }
        },

        methods: {

            initStoreTypes(){
                let _this = this;
                $.get("/storeType/all",{
                },function (data) {
                    console.log(data);
                    _this.storeTypes = data;
                })
            },


            initProvinceList() {  //省 / 直辖市
                let _this = this;

                $.get("/china/queryList?pid=0", function (data) {
                    console.log(data)

                    _this.addressForm.provinceList = data;
                    console.log(_this.addressForm.provinceList);
                    //市 区 选择项要置空
                    _this.addressForm.cityList = [];
                    _this.addressForm.cityId = '';
                    _this.addressForm.areaList = [];
                    _this.addressForm.areaId = '';
                })
            },
            refreshCity() {   //市  / 直辖市的区
                console.log(this.addressForm.provinceId)
                let _this = this;

                $.get("/china/queryList?pid=" + this.addressForm.provinceId, function (data) {
                    console.log(data)

                    _this.addressForm.cityId = '';
                    _this.addressForm.cityList = data;

                    //把县数据置空
                    _this.addressForm.areaList = [];
                    _this.addressForm.areaId = '';
                })
            },
            refreshArea() {   // 县 / -
                console.log(this.addressForm.cityId)

                let _this = this;

                $.get("/china/queryList?pid=" + this.addressForm.cityId, function (data) {
                    console.log(data)
                    _this.addressForm.areaId = '';
                    _this.addressForm.areaList = data;
                })
            },
            clearAddForm() {
                //打开新增地址表单时,清空表单数据
                this.addressForm.provinceId = '';
                this.addressForm.cityId = '';
                this.addressForm.areaId = '';
                this.$refs['addressForm'].resetFields();
            },
            saveAddress() {
                //搜集表单数据
                //省市区要id转name
                console.log("前");
                let provinceName = "";
                for (let item of this.addressForm.provinceList) {
                    if (item.id == this.addressForm.provinceId) {
                        provinceName = item.name;
                        break;
                    }
                }
                console.log("后");

                let cityName = "";
                for (let item of this.addressForm.cityList) {
                    if (item.id == this.addressForm.cityId) {
                        cityName = item.name;
                        break;
                    }
                }
                let areaName = "";
                for (let item of this.addressForm.areaList) {
                    if (item.id == this.addressForm.areaId) {
                        areaName = item.name;
                        break;
                    }
                }

                let params = {
                    province: provinceName,
                    city: cityName,
                    area: areaName,
                    detailAddress: this.addressForm.detailAddress,
                    tel: this.addressForm.tel,
                    receiver: this.addressForm.receiver,
                    emailCode: this.addressForm.emailCode
                }
                console.log(params);

                let _this = this;
                //数据提交后端接口,新增地址
                $.post("/address/add", params, function (data) {
                    console.log("addressId:"+data)
                    _this.addressId = data;
                    _this.$alert('添加成功');
                })
            },
            submitAddressForm(addressForm) {
                let _this = this;
                this.$refs[addressForm].validate((valid) => {
                    if (valid) {
                        _this.saveAddress();
                        _this.dialogFormVisible = false;
                        _this.clearAddForm();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },


            submitForm(formName) {
                let vueObj = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        $.post("/store/insert",{
                            addressId:vueObj.addressId,
                            storeName:vueObj.ruleForm.name,
                            detail:vueObj.ruleForm.detail,
                            chooseTypes: vueObj.ruleForm.chooseTypes,
                            storeImg: vueObj.ruleForm.image,

                        },function (data) {
                            console.log(data)
                            vueObj.$alert('添加成功');
                        })

                        vueObj.resetForm(formName);

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            handleAvatarSuccess(res,file){
                //RES是文件的名字，需要去后端拼字符串
                this.ruleForm.image = res;

                console.log(res);
                console.log(file);

            },


            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.ruleForm.image = '';
                this.ruleForm.name = '';
                this.ruleForm.region = '';
                this.ruleForm.detail = '';
            },



        },
        created() {
        this.initStoreTypes();
        this.initProvinceList();
    }
    });
</script>
</body>
</html>
